<template>
  <div>
    <div class="content">
      <el-row :gutter="25">
        <el-col :span="18">
          <div>
            <el-image
              style="border-radius: 0.5rem;"
              src="https://upload.jianshu.io/admin_banners/web_images/5055/348f9e194f4062a17f587e2963b7feb0b0a5a982.png?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540"
            ></el-image>
          </div>
          <ul
            class="infinite-list"
            v-infinite-scroll="load"
            style="overflow:auto"
          >
            <div
              class="article"
              v-for="item in arr.slice(0,count)"
              :key="item.id"
            >

              <div>
                <template>
                  <el-skeleton
                    style="width: 100%"
                    animated
                    :loading="loading"
                  >
                    <template slot="template">
                      <el-row>
                        <el-col :span="16">
                          <div style="padding-top: 1.5rem;">
                            <!-- 第一行 -->
                            <el-skeleton-item
                              variant="p"
                              style="width: 50%"
                            />
                            <!-- 第二行 -->
                            <div>
                              <el-skeleton-item
                                variant="text"
                                style="margin-top:0.5rem"
                              />
                            </div>
                            <!-- 第三行 -->
                            <div>
                              <el-skeleton-item
                                variant="text"
                                style="width: 60%;margin-top: 0.5rem;"
                              />
                            </div>
                            <!-- 第四行 -->
                            <div>
                              <el-skeleton-item
                                variant="text"
                                style="width: 75%;margin-top: 0.5rem;"
                              />
                            </div>
                          </div>
                        </el-col>
                        <el-col
                          :span="6"
                          :offset="2"
                        >
                          <el-skeleton-item style="width: 140px; height: 100px;margin-top:1.5rem" />
                        </el-col>
                      </el-row>
                    </template>
                  </el-skeleton>
                </template>
              </div>
              <el-row v-if="loading!=true">
                <el-col :span="18">
                  <p>{{item.title}}</p>
                  <p>{{item.content}}</p>
                  <div>

                  </div>
                </el-col>
                <el-col :span="6">图片</el-col>
              </el-row>
            </div>
          </ul>
          <p
            v-if="count>arr.length"
            style="text-align:center"
          >
            到底了~
          </p>
        </el-col>
        <el-col :span="6">右边</el-col>
      </el-row>
    </div>
    <template>
      <el-backtop></el-backtop>
    </template>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      count: 0,
      loading: true,
      arr: [
        { title: "标题1", content: "内容", id: 1 },
        { title: "标题2", content: "内容", id: 2 },
        { title: "标题3", content: "内容", id: 3 },
        { title: "标题4", content: "内容", id: 4 },
        { title: "标题5", content: "内容", id: 5 },
        { title: "标题6", content: "内容", id: 6 },
        { title: "标题7", content: "内容", id: 7 },
        { title: "标题9", content: "内容", id: 9 },
        { title: "标题10", content: "内容", id: 10 },
        { title: "标题11", content: "内容", id: 11 },
        { title: "标题12", content: "内容", id: 12 },
      ],
    };
  },
  methods: {
    load() {
      this.count += 3;
    },
    // showIcon() {
    //   if (
    //     !!document.documentElement.scrollTop &&
    //     document.documentElement.scrollTop > 200
    //   ) {
    //     console.log("页面高度大于200执行操作");
    //   } else {
    //     console.log("页面高度小于200执行操作");
    //   }
    // },
  },
  mounted() {
    // window.addEventListener("scroll", this.showIcon);
  },
  created() {
    setTimeout(() => {
      this.loading = false;
    }, 1200);
  },
};
</script>

<style scoped>
.content {
  width: 63%;
  margin: 2rem auto;
  margin-top: 100px;
}
.article {
  height: 150px;
  border-bottom: 1px solid lightgray;
  padding: 25px 0px 25px 0px;
}
</style>